<!-- ChangePassword.vue -->
<template>
    <!-- 顶部导航栏 -->
    <HeaderNav active-menu="profile" />
    <div class="change-password-container">

        <el-card class="password-card">
            <template #header>
                <div class="card-header">
                    <h2>修改密码</h2>
                </div>
            </template>

            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="password-form">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="form.oldPassword" type="password" placeholder="请输入原密码" show-password />
                </el-form-item>

                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" show-password />
                    <div class="password-tips">
                        密码必须包含字母和数字，长度6-20位
                    </div>
                </el-form-item>

                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入新密码" show-password />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="handleSubmit" class="submit-btn">
                        确认修改
                    </el-button>
                    <el-button @click="handleCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { sha1 } from 'js-sha1'
import { useUserStore } from '@/stores/user'
import { validatePassword } from '@/utils/validate'
import HeaderNav from '@/components/layout/HeaderNav.vue'

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const formRef = ref()

// 表单数据
const form = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

// 自定义验证规则
const validatePasswordRule = (rule, value, callback) => {
    if (!validatePassword(value)) {
        callback(new Error('密码必须包含字母和数字,长度6-20位'))
    } else {
        callback()
    }
}

const validateConfirmPassword = (rule, value, callback) => {
    if (value !== form.newPassword) {
        callback(new Error('两次输入的密码不一致'))
    } else {
        callback()
    }
}

// 验证规则
const rules = {
    oldPassword: [
        { required: true, message: '请输入原密码', trigger: 'blur' },
        { validator: validatePasswordRule, trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { validator: validatePasswordRule, trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        { validator: validateConfirmPassword, trigger: 'blur' }
    ]
}

// 提交表单
const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        loading.value = true

        // 调用修改密码接口
        await userStore.changePasswordAction({
            oldPassword: sha1(form.oldPassword),
            newPassword: sha1(form.newPassword)
        })

        ElMessage.success('密码修改成功')

        // 清空表单
        form.oldPassword = ''
        form.newPassword = ''
        form.confirmPassword = ''

        // 返回首页
        router.push('/')

    } catch (error) {
        ElMessage.error(error.message || '密码修改失败')
    } finally {
        loading.value = false
    }
}

// 取消修改
const handleCancel = () => {
    router.back()
}
</script>

<style scoped>
.change-password-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
    background: #f5f7fa;
}

.password-card {
    width: 500px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
    text-align: center;
}

.card-header h2 {
    margin: 0;
    color: #333;
}

.password-form {
    margin-top: 20px;
}

.password-tips {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.submit-btn {
    margin-right: 12px;
}
</style>